<template>
	<view>
		<view class="box w100 flex-col flex-al">
			<view class="header flex-sb flex-row flex-al w100">
				<view class="t-img flex-row flex-al">
					<image src="/static/imgs/loca3.png"></image>
					<!-- <text>{{data.length?data[0].lineName:''}} 详情</text> -->
					<text>起点：{{data.length?data[0].stationName:''}}</text>
				</view>
				<view class="t-updown flex-row flex-al" @click="updown">
					<image src="/static/imgs/r.png"></image>
					<text style="color:#444">切换方向</text>
				</view>
			</view>
			<view v-if="yunyinzhong.length" class="changqu-box flex-row flex-al flex-sb">
				<view class="flex-col">
					<view class="flex-row flex-al changqu-box-t">
						<image src="/static/imgs/bus.png"></image>
						<view >
							{{yunyinzhong.length}}辆运营中
						</view>
					</view>
					<view class="changqu-box-st">
						{{station[0].stationName||'起点站'}} 开往 {{station[station.length-1].stationName||'终点站'}}
					</view>
					<view class="changqu-box-st">
						待发车辆 {{changqu.length}}
					</view>
					<view class="changqu-box-st">
						 {{firstTime=='null'?'未知时间':firstTime}}---{{lastTime=='null'?'未知时间':lastTime}}
					</view>
				</view>
				<view class="changqu-box-xst">
					{{lineName.replace('XY','')}}
				</view>
			</view>
			<view v-else class="changqu-box changqu-box-blue flex-row flex-al flex-sb">
				<view class="flex-col">
					<view class="flex-row flex-al changqu-box-t">
						<image src="/static/imgs/bus.png"></image>
						<view >
							{{yunyinzhong.length}}辆运营中
						</view>
					</view>
					<view class="changqu-box-st">
						{{station[0].stationName||'起点站'}} 开往 {{station[station.length-1].stationName||'终点站'}}
					</view>
					<view class="changqu-box-st">
						待发车辆 {{changqu.length}}
					</view>
					<view class="changqu-box-st">
						  {{firstTime=='null'?'未知时间':firstTime}}---{{lastTime=='null'?'未知时间':lastTime}}
					</view>
				</view>
				<view class="changqu-box-xst">
					{{lineName.replace('XY','')}}
				</view>
			</view>
			<view class="line flex-row w100">
				<view v-if="yunyinzhong.length" class="line-left flex-col flex-al">
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
				</view>
				<view v-else class="line-left line-left-blue flex-col flex-al">
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
					<image src="/static/imgs/down.png"></image>
				</view>
				<view class="line-left2"></view>
				<view class="line-top"></view>
				<view class="line-bottom"></view>
				<view class="line-item flex-col">
					<view class="line-li flex-row flex-al" v-for="(item,i) in data" :key="item.id">
						<view v-if="item.id" class="o"></view>
						<view class="flex-row flex-al" v-if="item.id">
							<text class="dada">{{item.stationName}}</text>
							<view v-if="item.bus.length" class="flex-row flex-al busStyle" style="margin-left:20rpx">
								<image src="/static/imgs/bus.png"></image>
								<text>到站{{item.bus.length}}辆</text>
							</view>
						</view>
						<view v-if="!item.id" class="flex-row flex-al busStyle">
							<image src="/static/imgs/bus.png"></image>
							<text>行驶中 </text>
							<text v-if="item.selfCode">{{item.selfCode}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HttpModule from "../../../../module/httpModule.js"
	const httpModule = new HttpModule();
	export default {
		data() {
			return {
				data: [],
				busList: [],
				changqu:[],
				yunyinzhong:[],
				station:[],
				lineName:'',
				firstTime:'',
				lastTime:''
			}
		},
		onLoad(e) {
			console.log(e);
			const lineNo = e.lineNo
			const isUpDown = e.isUpDown;
			const source = e.source;
			const lineName = e.lineName;
			
			const firstTime = e.firstTime;
			const lastTime = e.lastTime;
			// firstTime
			// lastTime
			this.lineNo = lineNo;
			this.isUpDown = isUpDown;
			this.source = source;
			this.lineName = lineName;
			
			this.firstTime = firstTime;
			this.lastTime = lastTime;
			
			console.log(this.firstTime,this.lastTime)
			// /pages/realRime/line/index/index?lineNo=${l.lineNo}&source=${l.source}&isUpDown=${l.isUpDown}
			this.getLine(lineNo, isUpDown, source);
		},
		async onShow(){
			var _this=this;
			// clearInterval(reLoad);
			// var reLoad=setInterval(()=>{
			// 	_this.getLine(_this.lineNo, _this.isUpDown, _this.source);
			// },10000)
		},
		onPullDownRefresh() {
			this.getLine(this.lineNo, this.isUpDown, this.source);
			uni.stopPullDownRefresh()
		},
		methods: {
			async updown() {
				const lineNo = this.lineNo
				this.isUpDown = this.isUpDown == '0' ? '1' : '0'
				const isUpDown = this.isUpDown;
				await this.getLine(lineNo, isUpDown, this.source);
			},
			async getLine(lineNo, isUpDown, source) {
				uni.showLoading({
					title: '加载中',
				})
				const data = (await httpModule.lineDetial2({
					routeId: lineNo,
					upDown: isUpDown
				})).data.data;
				if (!data.length) {
					uni.showModal({
						title: '提示',
						content: '公交线未开通',
						success(res) {
							if (res.confirm) {
								uni.navigateBack({

								})
							} else if (res.cancel) {
								uni.navigateBack({

								})
							}
						}
					})
				} else {
					console.log('站点')
					console.log(data)
					// this.data=data;
					this.station=data
					const busInfo = (await httpModule.getBusInfoByLineNo2({
						lineNo,
						isUpDown,
						source
					})).data;
					console.log('busInfo')
					console.log(busInfo)
					let domTree = [];
					let yunyinzhong = [];
					let changqu=[]
					for(let i in busInfo){
						let bus= busInfo[i];
						if(bus.isUpDown=='3'){
							changqu.push(bus)
						}
						if(bus.isUpDown=='4'){
							changqu.push(bus)
						}
						if(bus.velocity=='0'&&bus.stationIndex=='1'){
							changqu.push(bus)
						}
					}
					this.changqu=changqu;
					for (let i in data) {
						let station = data[i];
						station.bus = []
						station.name="station"
						for (let u in busInfo) {
							let bus = busInfo[u];
							bus.name="bus"
							if (parseInt(bus.arrive) == 1 && bus.stationIndex == i && bus.isUpDown == isUpDown &&bus.velocity!='0'&&bus.stationIndex!='1') {
								domTree.push(bus);
								yunyinzhong.push(bus)
							}
							if (parseInt(bus.arrive) == 0 && bus.stationIndex == i && bus.isUpDown == isUpDown&&bus.velocity!='0'&&bus.stationIndex!='1') {
								station.bus.push(bus);
								yunyinzhong.push(bus)
							}
						}
						domTree.push(station)
					}
					// console.log(busList);
					console.log(domTree);
					this.data = domTree;
					this.yunyinzhong = yunyinzhong;
					uni.hideLoading();
					// console.log(busInfo)

				}
			}
		}
	}
</script>

<style scoped>
	.box {
		background: #fff
	}
	.changqu-box{
		font-size:25rpx;
		color: #fff;
		padding: 15rpx 24rpx;
		box-sizing: border-box;
		width:663rpx;
		/* height:153rpx; */
		background:linear-gradient(19deg,rgba(41,204,82,1) 0%,rgba(84,194,193,1) 100%);
		border-radius:7rpx;
		margin-top: 40rpx;
	}
	.changqu-box-blue{
		background:#3E8BC6;
	}
	.changqu-box-t{
		font-size:27rpx;
		font-weight: bold;
	}
	.changqu-box-t image{
		width: 29rpx;
		height: 29rpx;
		margin-right: 8rpx;
	}
	.changqu-box-st{
		font-size:25rpx;
		margin-top: 5rpx;
	}
	.changqu-box-xst{
		font-size:50rpx;
		font-weight:bold;
	}
	.header {
		padding: 50rpx;
		padding-bottom: 0;
		box-sizing: border-box
	}

	.t-img image {
		width: 38rpx;
		height: 38rpx;
		margin-right: 20rpx;
	}

	.t-img text {
		font-size: 32rpx;
		font-weight: bolder;
		color: rgba(42, 42, 42, 1);
	}

	.t-updown image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.t-updown text {
		font-size: 30rpx;
		color: rgba(26, 184, 148, 1);
	}

	.line {
		padding: 50rpx;
		box-sizing: border-box;
		position: relative;
	}

	.line-left {
		min-height: 300rpx;
		width: 50rpx;
		/* background: rgba(26, 184, 148, 1); */
		background:linear-gradient(180deg,rgba(41,204,81,1) 0%,rgba(74,197,166,1) 100%);
		border-radius: 25rpx;
	}
	.line-left-blue{
		background:#eee;
		
	}

	.line-left image {
		width: 29rpx;
		height: 25rpx;
		margin-top: 30rpx;
	}

	.line-left image:nth-child(5) {
		opacity: 0
	}

	.line-left image:nth-child(4) {
		opacity: .25
	}

	.line-left image:nth-child(3) {
		opacity: .50
	}

	.line-left image:nth-child(2) {
		opacity: .75
	}

	.line-left image:nth-child(1) {
		opacity: 1
	}

	.line-left2 {
		margin-left: 60rpx;
		min-height: 300rpx;
		border-left: 1rpx solid #EAEAEA00
	}

	.line-li {
		margin: 20rpx 0;
		margin-left: -8rpx;

	}

	.o {
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		margin-right: 25rpx;
		background: #E6E6E6;
	}

	.line-li text {
		font-size: 32rpx;
		font-weight: bolder;
		color: rgba(42, 42, 42, 1);
	}

	.line-top {
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #E6E6E600;
		left: 150rpx;
		top: 50rpx;
	}

	.line-bottom {
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #E6E6E600;
		left: 150rpx;
		bottom: 50rpx
	}

	.busStyle {
		padding: 10rpx 17rpx;
		margin-left: 60rpx;
		background:linear-gradient(182deg,rgba(42,204,85,1) 0%,rgba(71,197,160,1) 100%);
		border-radius: 8rpx;
		

	}

	.busStyle text {
		font-size: 25rpx !important;
		font-weight: normal !important;
		color: rgba(255, 255, 255, 1) !important;
	}

	.busStyle image {
		width: 31rpx;
		height: 31rpx;
		margin-right: 15rpx;
	}
</style>
